<template>
  <div>
    <section>
      <!--工具条-->
      <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
        <el-form :inline="true" >
          <el-form-item>
            <el-input  placeholder="姓名" v-model="keyWorld"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchEmp">查询</el-button>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="addEmp">添加员工</el-button>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="exportAll">导出全部数据</el-button>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="exportNowData">导出当前数据</el-button>
          </el-form-item>

<!--          导入数据-->
          <el-form-item>
            <el-upload
                class="upload-demo"
                action="/employee/importData"
                :http-request="uploadExcel"
                name="multipartFile">
              <el-button size="small" type="primary">导入excel数据</el-button>
            </el-upload>
          </el-form-item>


        </el-form>
      </el-col>

      <!--列表-->
      <template>
        <el-table :data="deptList" highlight-current-row v-loading="loading" style="width: 100%;" >
          <el-table-column
              type="selection">
          </el-table-column>

          <el-table-column prop="id" label="员工id" >
          </el-table-column>

          <el-table-column prop="username" label="账号名" >
          </el-table-column>

          <el-table-column prop="realName" label="真实姓名" >
          </el-table-column>
          <el-table-column prop="email" label="邮箱" >
          </el-table-column>
          <el-table-column prop="phone" label="电话"  >
          </el-table-column>



          <el-table-column prop="age" label="年龄"  >
          </el-table-column>


          <el-table-column prop="sex" label="性别" :formatter="sexFormat" >
          </el-table-column>


          <el-table-column prop="state" label="状态"  :formatter="stateFormat">
          </el-table-column>


          <el-table-column prop="departmentName" label="所属部门"  >
          </el-table-column>


          <el-table-column
              fixed="right"
              label="操作">
            <template slot-scope="scope">
              <el-button  type="text" size="small" @click="updateEmployee(scope.row)">修改</el-button>
              <el-button  type="text" size="small" @click="dleEmployee(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row type="flex">
          <el-col :span="20" >
            <el-pagination
                background
                layout="total, sizes, prev, pager, next"
                :current-page="1"
                @current-change="currentPageChange"
                @size-change="sizePageChange"
                :page-size.sync="size"
                :page-sizes="[5,6,7,8]"
                :total="total">
            </el-pagination>
          </el-col>
          <el-col :span="4" :push="2">
            <el-button type="danger" icon="el-icon-delete">批量删除</el-button>
          </el-col>
        </el-row>
<!--        分页信息-->

      </template>

    </section>
<!--    添加员工对话框-->
    <el-dialog title="添加员工信息" :visible.sync="addEmployeeDialog" :append-to-body="true" >

      <el-form ref="form" :model="form" label-width="80px">
        <el-row type="flex">
          <el-col :span="8">
            <el-form-item label="员工账号">
              <el-input v-model="form.username"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="真实名称">
              <el-input v-model="form.realName"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="密码">
              <el-input v-model="form.password"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex">
          <el-col :span="8">
            <el-form-item label="电话号码">
              <el-input v-model="form.phone"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="邮箱">
              <el-input v-model="form.email"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="员工年龄">
              <el-input-number v-model="form.age"  :min="18" :max="99" label="年龄"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex">
          <el-col :span="10">
            <el-form-item label="所属部门">
              <el-select v-model="form.departmentId" placeholder="请选择部门">
                <el-option  v-for = " item in deptInfoList" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="7">
            <el-form-item label="员工状态">
              <el-select v-model="form.state" placeholder="员工状态">
                <el-option label="正常" value="1"></el-option>
                <el-option label="锁定" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="员工性别">
              <el-radio-group v-model="form.sex">
                <el-radio :label="1" >男</el-radio>
                <el-radio :label="0" >女</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item>
          <el-button type="primary" @click="submitAddEmployee">立即创建</el-button>
          <el-button @click="addEmployeeDialog=false">取消</el-button>
        </el-form-item>


      </el-form>
    </el-dialog>
<!--    修改员工共对话框-->
    <el-dialog title="添加员工信息" :visible.sync="updateEmployeeDialog" :append-to-body="true" >

      <el-form ref="form" :model="form" label-width="80px">
        <el-row type="flex">
          <el-col :span="8">
            <el-form-item label="员工账号">
              <el-input v-model="form.username"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="真实名称">
              <el-input v-model="form.realName"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="密码">
              <el-input v-model="form.password"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex">
          <el-col :span="8">
            <el-form-item label="电话号码">
              <el-input v-model="form.phone"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="邮箱">
              <el-input v-model="form.email"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="员工年龄">
              <el-input-number v-model="form.age"  :min="18" :max="99" label="年龄"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex">
          <el-col :span="10">
            <el-form-item label="所属部门">
              <el-select v-model="form.departmentId" placeholder="请选择部门">
                <el-option  v-for = " item in deptInfoList" :label="item.name" :value="item.id" :key="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="7">
            <el-form-item label="员工状态">
              <el-select v-model="form.state" placeholder="员工状态">
                <el-option label="正常" :value="1" key="1"></el-option>
                <el-option label="锁定" :value="2" key="2"></el-option>
                <el-option label="注销" :value="-1" key="3"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="员工性别">
              <el-radio-group v-model="form.sex">
                <el-radio :label="1" >男</el-radio>
                <el-radio :label="0" >女</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item>
          <el-button type="primary" @click="submitUpdateEmployee">确认修改</el-button>
          <el-button @click="updateEmployeeDialog=false">取消</el-button>
        </el-form-item>


      </el-form>
    </el-dialog>
  </div>

</template>
<script>
import addDept from "@/views/nav1/addDept";
import updateDept from "@/views/nav1/updateDept";
import {getDept} from "@/api/department";
import {deleteEmployeeBatch, exportAllEmployeeData, getEmployee, updateEmployee} from "@/api/employee";
import {addEmployee} from "@/api/employee";
import {getEmployeeByNameLike} from "@/api/employee";
import {exportDataUtil} from "@/api/utils";
import axios from "axios";
  export default {
    components: {addDept,updateDept},
    data() {
			return {
        updateEmployeeDialog:false,
			  deptList:[],
        deptInfoList:[],
        obj:[],
        loading:true,
        treeDeptList:[],
        page:1,
        size:5,
        total:0,
        keyWorld:'',
        addEmployeeDialog:false,
        showUpdateDept:false,
        deptId:null,
        form:{
          id:null,
          username:null,
          realName:null,
          email:null,
          phone:null,
          password:null,
          age:1,
          sex:1,
          state:null,
          departmentId:null
        },
			}
		},
    methods:{
      //上传excle文件数据
      uploadExcel(head){
        let file = head.file;
        let params = new FormData();
        params.append("multipartFile",file);
        axios({
          url:'/employee/importData',
          method:"post",
          'Content-type':'multipart/form-data',
          data:params
        }).then(resp=>{
          if (resp.data.code==200){
            this.$message({
              message:resp.data.msg,
              type:"success"
            })
          }
        })
      },
      //导出全部员工数据
      exportAll(){
        exportAllEmployeeData().then(resp=>{
          if (resp.status==200){
            this.$message({
              message:"数据导出成功",
              type:'success'
            })

            //导出数据
            exportDataUtil(resp)
          }
          else {
            this.$message({
              message:"数据导出失败",
              type:'error'
            })
          }
          console.info(resp)
        })

      },
      //导出当前数据
      exportNowData(){
        axios({
          url:'/employee/exportData',
          method:'post',
          responseType: 'blob',
        }).then(resp=>{
          exportDataUtil(resp)
        })
      },
      //删除员工数据
      dleEmployee(id){
        let ids = [id];
        this.$confirm('确定要删除吗','提示',{
          confirmButtonText:"确定",
          cancelButtonText:'取消'
        }).then(()=>{
          deleteEmployeeBatch(ids).then(resp=>{
            if (resp.data.code==200){
              this.$message({
                message:resp.data.msg,
                type:'success'
              })
              //重新加载数据
              this.loadingEmp();
            }
            else {
              this.$message({
                message:resp.data.msg,
                type:'error'
              })
            }
          })
        }).catch(()=>{
          this.$message({
            message:'已取消',
            type:'info'
          })
        })
      },
      //修改员工信息
      submitUpdateEmployee(){
        //清空数据
        updateEmployee(this.form).then(resp=>{
          if (resp.data.code==200) {
            this.$message({
              message:resp.data.msg,
              type:'success'
            })
            //重新加载数据
            this.loadingEmp()
            this.updateEmployeeDialog=false;
          }
          else this.$message({
            message:resp.data.msg,
            type:"error"
          })
          //关闭修改对话框
          this.updateEmployeeDialog=false;
        })
        // this.form=null;
      },
      //更新员工信息
      updateEmployee(row){

        this.form=row;
        //打开修改员工对话框
        this.updateEmployeeDialog=true;
      },
      //性别格式化
      sexFormat(row){
        if (row.sex==0||row.sex=='0') return '女';
        return '男'
      },
      //状态格式化
      stateFormat(row){
        if (row.state=='1'||row.state==1) return'正常';
        else if (row.state=='2'||row.state==2) return '锁定';
        return '注销';
      },
      //查询员工信息
      searchEmp(){
        this.loading=true;
        getEmployeeByNameLike(this.page,this.size,this.keyWorld).then(resp=>{
          if (resp.data.code==200){
            this.$message({
              message:resp.data.msg,
              type:"success"
            })
            //渲染员工数据
            this.deptList=resp.data.data;
            this.loading=false;
          }
        })
      },
      //分页信息
      //当前页发生变化的时候
      currentPageChange(val){
        this.page=val;
        this.loadingEmp();
      },
      //页面显示条数发生变化的时候
      sizePageChange(val){
        this.size=val;
        this.loadingEmp()
      },
      //获取员工数据
      loadingEmp(){
        getEmployee(this.page,this.size).then(resp=>{
          this.loading=true;
          if (resp.data.code==200){
            this.$message({
              message:resp.data.msg,
              type:'success'
            })
            this.deptList=resp.data.data;
            this.loading=false;
            this.total=resp.data.total
          }
        })
      },
      addEmp(){
        this.form.username=null;
        this.form.password=null;
        this.form.sex=null;
        this.form.age=null;
        this.form.state=null;
        this.form.phone=null;
        this.form.email=null;
        this.form.departmentId=null;
        this.form.realName=null
        this.addEmployeeDialog=true;
      },
      submitAddEmployee(){
        addEmployee(this.form).then(resp=>{
          if (resp.data.code==200){
            this.$message({
              message:resp.data.msg,
              type:"success"
            })
            //重新加载员工数据
            this.loadingEmp();
            this.addEmployeeDialog=false;
          }
          else {
            this.$message({
              message:resp.data.msg,
              type:'error'
            })
          }
        })

      },
    },
    mounted(){
      //获取员工数据
      this.loadingEmp();
      //获取部门数据
      getDept(1,9999).then(resp=>{
        if (resp.data.code==200){
          //预存部门数据
          this.deptInfoList= resp.data.data;
        }
      })
    }
	};

</script>

<style scoped>

</style>